<template>
  <div>
    <!--1.视图-->
    <!--    搜索-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="原材料名称">
        <el-input
          v-model="queryParams.quest"
          placeholder="原材料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--    页面-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['car:type:add']"
        >新增</el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          plain-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['system:role:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:role:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport">
          <!--          v-hasPermi="['system:post:export']"-->
          >导出</el-button>
      </el-col>
    </el-row>

    <template>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          fixed
          prop="processId"
          label="id"
          width="150">
        </el-table-column>
        <el-table-column
          prop="quest"
          label="任务名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="questNum"
          label="任务数量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cropName"
          label="材料名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="cropNum"
          label="使用材料数量/份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!--    分页-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getProcessList"
    />

    <!--    添加/修改-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="任务名称" prop="eggsTime">
          <el-input v-model="form.quest" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务数量">
          <template>
            <el-input-number v-model="form.questNum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
        </el-form-item>


        <el-form-item  label="材料名称" prop="cropProcess" >
          <div class="patrol-content">
            <div class="point">
              <div class="point-item"
                   v-for="(item,index) in cropProcess"
                   :key="index">
                <div class="point-select">
                  <el-select v-model="item.cropId" placeholder="请选择材料名称">
                    <el-option
                      v-for="(item,index) in CropList"
                      :key="index"
                      :label="item.name"
                      :value="item.cropId">
                    </el-option>
                  </el-select>
                  <template>
                    <el-input-number v-model="item.cropNum" @change="handleChange(index)" :min="1" :max="10" label="描述文字"></el-input-number>
                  </template>
                </div>
                <el-button @click.prevent="removeDomain(index)">删除材料</el-button>
                <el-button @click="addDomain(index)">新增材料</el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="备注" prop="validity">
          <textarea v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { listProcess , addProcess , updateProcess , deleteProcessById ,getById, listCrop } from "@/api/processing/process";

export default {
  name: "index",
  data() {
    return {
      //2属性定义
      tableData:[],
      farmers: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        quest: undefined
      },
      total:0,
      showSearch:true,
      open:false,   // 打开表单
      title:'',     //标题 添加/修改
      form: {},   //添加 / 修改
      ids:'',
      options:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //---------------------------------
      cropProcess:[
        {
          cropId:undefined,
        }
      ],
      CropList:[],
      cropNumValues: [],
      totalSum: 0
    }
  }, methods: {
    //3.方法
    getProcessList(){
      listProcess(this.queryParams).then(res=>{
        this.tableData=res.rows;
        this.total=res.total;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getProcessList();
    },
    handleAdd() {
      this.form={};
      this.title = "添加加工列表";
      this.open = true;
    },
    submitForm: function() {
      if(this.title==="添加加工列表"){
        this.form.cropids=this.cropProcess.map(i=>i.cropId);
        this.form.cropNum=this.totalSum;
        console.log(this.form)
        addProcess(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getProcessList();
        });
      } else{
        updateProcess(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getProcessList();
        });
      }
    },
    handleSelectionChange(val){     // 获取多选id 的值
      this.ids=val.map(res=>res.processId).join(",");
      this.single = val.length!=1;
      this.multiple = !val.length
      console.log(this.ids);
    },
    handleUpdate(row) {
      let processId = row.processId;
      getById(processId).then(r=>{
        this.form=r.data;
        console.log(r.data)
        this.cropProcess=[];
        for (let i = 0; i < r.data.crops.length; i++) {
          console.log(r.data.crops[i])
          console.log(this.cropProcess);
          this.cropProcess.push({cropId:r.data.crops[i]}) ;
        }
      })

      this.open=true;
      this.title="修改原材料批次号列表";
    },
    handleDelete(){             //删除
      const ids =this.ids;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function() {
        return deleteProcessById(ids);
      }).then(() => {
        this.getProcessList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('crop/material/export', {
        ...this.queryParams
      }, `post_${new Date().getTime()}.xlsx`)
    },
    handleChange(index){
      this.cropNumValues[index] = this.cropProcess[index].cropNum;
      this.totalSum = this.cropNumValues.reduce((sum, num) => sum + num, 0);
      console.log(this.cropNumValues);
    },
    getlistCrop(){
      listCrop().then(res=>{
        this.CropList=res.data;
      })
    },
/////--------------------------------------
    removeDomain(index) {
      if(this.cropProcess.length>1){
        this.cropProcess.splice(index, 1)
      }
    },
    addDomain(index) {
      this.cropProcess.splice(index+1,0,{
        typeId:undefined,
      });
    },

  }, created() {
    //4.钩子函数
    this.getProcessList();
    this.getlistCrop();
  }
}
</script>

<style scoped>

</style>
